
<div class="modal fade" id="addBankModal" tabindex="-1" role="dialog" aria-labelledby="addBankModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="addBankModalLabel">Add Bank</h4>
      </div>
      <form [formGroup]="myForm">
        <div class="modal-body">
            <div class="form-group text-left">
              <label for="bankID">Bank ID</label>
                <input formControlName="bankID" type="text" class="form-control">
                </div>      
            <div class="form-group text-left">
              <label for="name">Bank Name</label>  
                <input formControlName="name" type="text" class="form-control">          
            </div>
                     
            <div class="form-group text-left">
              <label for="coinsValue">Coins Balance</label>  
                <input formControlName="coinsValue" type="text" class="form-control">          
            </div>            

            <div class="form-group text-left">
              <label for="cashValue">Cash Balance</label>  
                <input formControlName="cashValue" type="text" class="form-control">          
            </div>

            <div class="form-group text-left">
              <label for="cashCurrency">Cash Currency</label>  

              <div>
              <select name="cashCurrency" formControlName="cashCurrency">
                <option value="USD">USD</option>                
              </select>
              </div>
            </div>

                
        </div>
        <div class="modal-footer">
          <button (click)="addBank(myForm);" type="submit" class="btn btn-success" data-dismiss="modal">Submit</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>


<div class="modal fade" id="updateBankModal" tabindex="-1" role="dialog" aria-labelledby="updateBankModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="updateBankModalLabel">Update Asset</h4>
      </div>
      <form [formGroup]="myForm">
        <div class="modal-body">
            <div class="form-group text-left">
              <label for="bankID">Bank ID</label>
                <input [ngModel]="bankID"formControlName="bankID" type="text" class="form-control">            
            </div>          
            <div class="form-group text-left">
              <label for="name">Bank Name</label>
                <input [ngModel]="name"formControlName="name" type="text" class="form-control">              
            </div>                      
        </div>
        <div class="modal-footer">
          <button (click)="updateBank(myForm)" type="submit" class="btn btn-success" data-dismiss="modal">Submit</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>


<div class="modal fade" id="deleteBankModal" tabindex="-1" role="dialog" aria-labelledby="deleteBankModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="deleteBankModalLabel">Delete Asset</h4>
      </div>
      <form [formGroup]="myForm" (ngSubmit)="deleteBank()">
        <div class="modal-body">
          Are you sure you want to delete this asset?
        </div>
        <div class="modal-footer">
          <button (click)="deleteBank()" type="submit" class="btn btn-danger" data-dismiss="modal">Yes</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        </div>
      </form>
    </div>
  </div>
</div>






<div class="container">
  <div *ngIf="errorMessage" class="alert alert-danger" role="alert">
		<strong>Error:</strong> {{errorMessage}}
	</div>
  <div class="row">
      <h1 class="heading">Banks </h1> 
  </div>

 <div class="row">
    <div class="col-md-12 text-right">
      <button (click)="resetForm()" type="button" class="btn btn-primary" data-toggle="modal" data-target="#addBankModal">Add Bank</button>
    </div>
  </div>
  <br>
  <div class="row">
    <div class="col-md-12">
      <table class="table table-bordered table-responsive table-hover">
        <thead class="thead">
          <tr class="thead-cols">
            
                <th class="bc">Bank ID</th>
            
                <th class="bc">Bank Name</th>
            
                <th class="bc">Coins Balance</th>  

                <th class="bc">Cash Balance</th>

                <th class="bc">Cash Currency</th>

                <th class="bc">Actions</th>       
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let bank of allBanks">
          
                <td>{{bank.bankID}}</td>
            
                <td>{{bank.name}}</td>            

                <td>{{bank.coinsValue}}</td>

                <td>{{bank.cashValue}}</td>

                <td>{{bank.cashCurrency}}</td>
           
            <td>

              <button (click)="getForm(bank.bankID);" type="button" class="btn btn-success" data-toggle="modal" data-target="#updateBankModal">Update</button>

              <button (click)="setId(bank.bankID);" type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteBankModal">Delete</button>

            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</div>